<template>
    <el-row :gutter="20" class="main-t">
        <el-col :span="2.5"><div class="one">
                排序：<el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
         {{message}}<i class="el-icon-arrow-down el-icon--right"></i></span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="0">默认排序</el-dropdown-item>
                        <el-dropdown-item v-show="one" command="1">商品价格<i class="el-icon-top"></i></el-dropdown-item>
                        <el-dropdown-item v-show="two" command="2">商品价格<i class="el-icon-bottom"></i></el-dropdown-item>
                        <el-dropdown-item v-show="three" command="3">商品名称<i class="el-icon-top"></i></el-dropdown-item>
                        <el-dropdown-item v-show="four" command="4">商品名称<i class="el-icon-bottom"></i></el-dropdown-item>
                        <el-dropdown-item v-show="five" command="5">商品编码<i class="el-icon-top"></i></el-dropdown-item>
                        <el-dropdown-item v-show="six" command="6">商品编码<i class="el-icon-bottom"></i></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div></el-col>
        <el-col :span="2.5"><div class="two">
                标签： <el-dropdown @command="handleCommand1">
        <span class="el-dropdown-link">
         {{message1}}<i class="el-icon-arrow-down el-icon--right"></i></span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="h">全部</el-dropdown-item>
                    <el-dropdown-item command="e">新品上架</el-dropdown-item>
                    <el-dropdown-item command="f">热卖优惠</el-dropdown-item>
                    <el-dropdown-item command="g">清仓优惠</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            </div></el-col>
        <el-col :span="2.5"><div class="three">
            品牌： <el-dropdown @command="handleCommand2">
        <span class="el-dropdown-link">
         {{message2}}<i class="el-icon-arrow-down el-icon--right"></i></span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="s">全部</el-dropdown-item>
                <el-dropdown-item command="q">饮料</el-dropdown-item>
                <el-dropdown-item command="w">母婴</el-dropdown-item>
                <el-dropdown-item command="z">家电</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        </div></el-col>
        <el-col :span="2.5"><div class="four">
            <el-checkbox v-model="checked" @change="youhuo">有货</el-checkbox>
        </div></el-col>
        <el-col :span="12"><div class="kongbai"></div></el-col>
        <el-col :span="2"><div class="tupian">
            <i class="el-icon-menu" @click="heng"></i>
            <i class="el-icon-s-operation" @click="shu"></i>
        </div></el-col>
<!--        <el-col :span="0"><div class="last"></div></el-col>-->
    </el-row>
</template>

<script>
    export default {
        name: "Daohang",
        data(){
            return{
                 checked:false,
                 message:'默认排序',
                 message1:'全部',
                 message2:'全部',
                 one:true,
                 two:false,
                 three:true,
                 four:false,
                 five:true,
                 six:false
            }
        },
        methods:{
            youhuo(command){
                this.$emit('youhuo',command)
                // console.log(this.checked)
            },
            handleCommand(command) {     //排序
                this.$emit('paixu',command)
                if(command==='0'){
                    this.message='默认排序'
                }
                if(command==='1'){
                    this.one=false
                    this.two=true
                    this.message='商品价格'
                }
                if(command==='2'){
                    this.one=true
                    this.two=false
                    this.message='商品价格'
                }
                if(command==='3'){
                    this.three=false
                    this.four=true
                    this.message='商品名称'
                }
                if(command==='4'){
                    this.three=true
                    this.four=false
                    this.message='商品名称'
                }
                if(command==='5'){
                    this.five=false
                    this.six=true
                    this.message='商品编码'
                }
                if(command==='6'){
                    this.five=true
                    this.six=false
                    this.message='商品编码'
                }
            },
            handleCommand1(command){  //标签
                this.$emit('biaoqian',command)
                if(command==='h'){
                    this.message1='全部'
                }
                if(command==='e'){
                    this.message1='新品上架'
                }
                if(command==='f'){
                    this.message1='热卖优惠'
                }
                if(command==='g'){
                    this.message1='清仓优惠'
                }
            },
            handleCommand2(command){   //品牌
                this.$emit('pingpai',command)
                if(command==='s'){
                    this.message2='全部'
                }
                if(command==='q'){
                    this.message2='马萨拉蒂'
                }
                if(command==='w'){
                    this.message2='迈凯伦'
                }
                if(command==='z'){
                    this.message2='大G'
                }
            },
            heng(){
                this.$emit('heng')
            },
            shu(){
                this.$emit('shu')
            }
        }
    }
</script>

<style scoped>
    .main-t{
        padding: 20px 20px;
        background-color: #FFF;
        font-size: 14px;
    }
    .el-dropdown-link {
        cursor: pointer;

    }
    .el-dropdown-link:hover{
        color: #0591aa;
    }
    .el-icon-arrow-down {
        font-weight:900;
        border:0.01rem solid #cecece;
    }
    .el-dropdown-link:hover .el-icon-arrow-down{
        background-color:#0591aa; ;
        color: white;
    }
    .kongbai{
        height: 1.2rem;
    }
    .tupian i{
        width: 26px;
        height: 26px;
    }
    .el-icon-menu:before,
    .el-icon-s-operation:before{
        color: #cecece;
        font-size: 1.8rem;
        cursor: pointer;
    }
    .el-icon-s-operation:before{
        margin-left: 1.5rem;
    }

</style>